<template>
  <div class="allbox">
    <div class="search_box">
      <div class="Input_search_box">
        <Input placeholder="此处有搜索框" v-model="seachvalue" />
      </div>
      <div class="Icon_buitton_box" @click="likeSecrch()">
        <Icon
          type="ios-search"
          size="25"
          color="white"
          class="Icon_search_box"
        />
      </div>
    </div>
    <div class="table_box">
      <Table :columns="columns" :data="dataGoods">
        <!-- 插槽按钮 -->
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showparticulars(row)"
            >详情</Button
          >
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="oksend(row)"
            >通过</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="notsend(row)"
            >拒绝</Button
          >
          <!-- <Button type="dashed" size="small" style="margin-right: 5px"
            >修改</Button
          > -->
        </template>
      </Table>
    </div>
    <div class="page_box_goodsMange">
      <template>
        <Page
          :total="dataCount"
          :page-size="pageSize"
          show-total
          class="paging"
          @on-change="changepage"
        />
      </template>
    </div>
    <Modal v-model="modal1" title="项目详情">
      <div class="Goods_message_box">
        <div class=" img_box_Goods">
          <img :src="ImgUrl" alt="" class="Goods_img" />
          <Button
            type="primary"
            style="margin-left:20px;margint-top:10px"
            @click="showVideo"
          >
            <Icon type="ios-videocam" />
            视频观看</Button
          >
        </div>
        <div class="right_goods_box">
          <div>
            <span>项目名：</span>
            <span>{{ name_Goods }}</span>
          </div>
          <div>
            <span>文字简介：</span>
            <span>{{ text_Goods }}</span>
          </div>
        </div>
      </div>
    </Modal>

    <Modal v-model="modal3">
      <div class="video_goods_box">
        <video
          ref="videos"
          :src="videoUrl"
          width="100%"
          controls="controls"
        ></video>
      </div>
      <div slot="footer">
        <Button type="primary" @click="letVideoStop">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// 引入获取数据函数
import { pendingMsg } from "server/GoodsManage.js";
import { okMsg } from "server/GoodsManage.js";
import { notokMsg } from "server/GoodsManage.js";
// 表头
const columns = [
  {
    title: "id",
    key: "gid",
    // width: 60,
  },
  {
    title: "项目名",
    key: "g_name",
    width: 250,
  },
  {
    title: "期望金额",
    key: "g_end_money",
    // width: 100,
  },
  {
    title: "时间",
    key: "g_create_time",
    // width: 180,
  },
  {
    title: "发起人",
    key: "nickname",
  },
  {
    title: "操作",
    slot: "action",
    // width: 260,
    align: "center",
    width: 200,
  },
];

export default {
  data() {
    return {
      // 模糊搜素的值
      seachvalue: "",
      // 表头
      columns,
      // 此处为修改后的data
      dataGoods: [],
      // 此处为所有的data
      allData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 4,
      // 模态框1的值
      modal1: false,
      // 审核模态框
      modal3: false,
      // 变更ID
      changgeId: "",
      // 图片路径
      ImgUrl: "",
      // 商品名
      name_Goods: "",
      // 视频路径
      videoUrl: "",
      // 详情介绍绑定 g_text
      text_Goods: "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍",
    };
  },
  methods: {
    // 审核通过函数
    oksend(i) {
      var _this = this;
      okMsg(i.gid).then(function() {
        pendingMsg().then(function(res) {
          _this.changepagenew(res);
        });
      });
      this.$Message["success"]({
        background: true,
        content: "审核已完成！",
      });
    },
    // 停止video播放
    letVideoStop() {
      this.$refs.videos.pause();
      this.modal3 = false;
    },
    // 审核未通过函数
    notsend(i) {
      var _this = this;
      okMsg(i.gid).then(function() {
        pendingMsg().then(function(res) {
          _this.changepagenew(res);
        });
      });
      this.$Message["success"]({
        background: true,
        content: "审核已完成！",
      });
    },
    // 分页函数页面点击
    changepage(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.dataGoods = this.allData.slice(_start, _end);
    },
    // 分页
    changepagenew(sendsdata) {
      this.dataGoods = [];
      this.allData = [];
      this.allData = sendsdata;
      this.dataCount = sendsdata.length;
      if (sendsdata.length < this.pageSize) {
        this.dataGoods = this.allData;
      } else {
        this.dataGoods = this.allData.slice(0, this.pageSize);
      }
    },
    // 模糊搜素
    likeSecrch() {
      let _this = this;
      let sendMsg = this.seachvalue;
      pendingMsg(sendMsg).then(function(res) {
        _this.changepagenew(res);
      });
    },
    // 详情显示
    showparticulars(row) {
      this.ImgUrl = row.g_picture;
      this.name_Goods = row.g_name;
      this.nowmoney = row.g_start_money;
      this.wantmoney = row.g_end_money;
      this.videoUrl = row.g_video;
      this.modal1 = true;
      this.text_Goods = row.g_text;
    },
    // 审核模态框
    showpending(row) {
      this.Modal2 = true;
      this.changgeId = row.gid;
    },
    // 视频模态框函数
    showVideo() {
      if (this.videoUrl == "无") {
        this.$Message["error"]({
          background: true,
          content: "该项目没有视频",
        });
      } else {
        this.modal3 = true;
      }
    },
  },
  // 渲染表格生命周期
  beforeCreate() {
    var _this = this;
    pendingMsg().then(function(res) {
      _this.changepagenew(res);
    });
  },
};
</script>
<style scoped>
.Icon_buitton_box {
  width: 9%;
  height: 79%;
  /* border: 1px solid; */
  border-top-right-radius: 15%;
  border-bottom-right-radius: 15%;
  float: left;
  background: #2d8cf0;
}
.Input_search_box {
  width: 80%;
  height: 100%;
  /* border: 1px solid; */
  float: left;
}
/* .allbox{
  width: 100%;
  height: 600px;
  border: 1px solid black;
} */
.table_box {
  height: 350px;
  /* border: 1px solid black; */
}
.Icon_search_box {
  margin-left: 20%;
  margin-top: 8%;
}
.search_box {
  width: 50%;
  margin-bottom: 20px;
  height: 40px;
}
.IMg_box_Goodscheck {
  width: 40%;
  height: 200px;
  float: left;
}
.IMg_Goodscheck {
  width: 100%;
  height: 150px;
}
.font_box_Goodscheck {
  width: 50%;
  float: left;
  margin-left: 5%;
}
.message_box_Goodscheck {
  height: 220px;
  width: 100%;
}
.page_box_GoodsCheck {
  margin-top: 20px;
}
.check_box_send {
  margin-left: 60%;
}
.page_box_goodsMange {
  margin-top: 20px;
}
.Goods_message_box {
  width: 100%;
  height: 200px;
  /* float: left; */
}
.img_box_Goods {
  width: 40%;
  height: 200px;
  /* border: 1px solid; */
  float: left;
}
.Goods_img {
  width: 100%;
  height: 150px;
}
.right_goods_box {
  width: 50%;
  height: 200px;
  /* border: 1px solid; */
  float: left;
  margin-left: 5%;
}
</style>
